<template>
	<!-- 确定提货 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="确定提货" />
		<!-- 商品信息 -->
		<view class="title">商品信息</view>
		<view class="goods">
			<block v-for="(item,index) in goodsList" :key="index">
				<view class="paygoods">
					<image :src="item.cover_image" class="paygoods_pic"></image>
					<view class="paygoodsinfo">
						<view class="paygoodsinfo_title">{{item.goods_name}}</view>
						<view class="paygoodsinfo_price">商品价值<text>{{item.goods_price}}</text></view>
						<view class="paygoodsinfo_freight" :class="{ 'end' : pageType == 'synthesis'}">
							<text v-if="Number(item.freight_price)>0">{{item.freight_price}}元运费</text>
							<text v-else>包邮</text>
						</view>
					</view>
				</view>
				<view class="line"></view>
			</block>
			<view class="seemore" @click="seemore" v-if="showMore">
				<text>查看更多</text>
				<image src="/static/images/seemore.png"></image>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">商品数量</view>
				<text>{{orderInfo.goods.length}}件</text>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">商品运费</view>
				<text>￥{{totalfreight}}元</text>
			</view>
<!-- 			<view class="payinfo">
				<view class="payinfo_title">心愿币抵扣</view>
				<view class="payinfo_text">
					<text>可用心愿币为<text style="color: #FF6407;">￥{{orderInfo.balance}}</text></text>
					<view class="payinfo_text_icon" @click="isUsebalance=!isUsebalance">
						<image src="/static/images/mall/moneychecked.png" v-if="isUsebalance"></image>
						<image src="/static/images/mall/check.png" v-else></image>
					</view>
				</view>
			</view> -->
			<view class="payinfo">
				<view class="payinfo_title">实际应支付</view>
				<text>￥{{usebalancePayablemoney}}</text>
			</view>
		</view>
		<!-- 收件人信息 -->
		<view class="addedit" v-if="JSON.stringify(this.addressInfo) !=='{}' || defaultAddressInfo.length>0">
			<view class="title">收件人信息</view>
			<view class="edit" @click="addConsignee">
				<text>修改</text>
				<image src="/static/images/mall/more_address.png"></image>
			</view>
		</view>
		<view class="title" v-else>收件人信息</view>
		<view class="consignee">
			<view v-if="defaultAddressInfo.length>0 && JSON.stringify(this.addressInfo) ==='{}'">
				<view class="consignee_info" @click="addConsignee">
					<view class="consignee_info_name">{{defaultAddressInfo[0].contact_name}}</view>
					<view class="consignee_info_phone">{{defaultAddressInfo[0].contact_phone}}</view>
				</view>
				<view class="consignee_address">{{defaultAddressInfo[0].province}}{{defaultAddressInfo[0].city}}{{defaultAddressInfo[0].district}}{{defaultAddressInfo[0].address}}</view>
			</view>
			<view v-else>
				<view class="consignee_add" v-if="JSON.stringify(addressInfo)=='{}'" @click="addConsignee">添加收货人</view>
				<view class="consignee_info" v-if="JSON.stringify(addressInfo)!='{}'">
					<view class="consignee_info_name">{{addressInfo.contact_name}}</view>
					<view class="consignee_info_phone">{{addressInfo.contact_phone}}</view>
				</view>
				<view class="consignee_address" v-if="JSON.stringify(addressInfo)!='{}'">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.address}}</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="title">支付方式</view>
		<view class="paytype">
			<view class="paytype_item" @click="payActive=0">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 0" class="paytype_item_check"></image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
				<text>支付宝支付</text>
			</view>
			<view class="paytype_item" @click="payActive=1">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check"></image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
				<text>微信支付</text>
			</view>
		</view>
		<view class="paybtn" v-if="pageType != 'synthesis'">
			<view class="paybtn_btn1" @click="toRecovery">去回收</view>
			<view class="paybtn_btn2" @click="payBefore">立即提货</view>
		</view>
		<view class="paybtn2" v-else>
			<view class="paybtn2_btn2" @click="payBefore">立即提货</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressInfo:{},//地址信息
				defaultAddressInfo:[],//默认地址信息
				payableMoney: 0, //应支付金额
				isUsebalance:false,//是否使用心愿币抵扣
				balance:'',//心愿币抵扣金额
				usebalancePayablemoney:0,//使用心愿币抵扣后应支付金额
				payActive:0,//当前选中的支付方式 0支付宝 1微信
				allowTap:true,//防误触
				goods_id:'',//背包商品id
				goods_ids:'',//商品id
				num:1,//购买数量
				orderInfo:{
					balance:'',
					postage_num:'',
					goods:[]
				},//订单信息
				goodsList:[],
				showMore:false,//显示查看更多
				totalfreight:'',//商品总运费
				pageType:''//订单类型 - 碎片合成
			}
		},
		onLoad(options) {
			console.log("options: ",options);
			this.goods_id = options.goods_id;
			if(options.goods_ids && options.goods_ids!=undefined){
				this.goods_ids = options.goods_ids;
			}
			if(options.num && options.num!=undefined){
				this.num = options.num;
			}
			if(options.pageType && options.pageType!=undefined){
				this.pageType = options.pageType;
			}
			if(this.pageType == 'synthesis'){
				this.getSgoodscreatea();
			}else{
				this.getBackpackpicka();
			}
			this.init();
		},
		onShow() {
			let page = getCurrentPages();
			let curPage = page[page.length - 1];
			if(curPage.$vm.addressInfo){
				this.addressInfo = curPage.$vm.addressInfo;
			}
		},
		watch:{
			isUsebalance(){
				if(this.isUsebalance && Number(this.orderInfo.balance)>=this.payableMoney){
					this.usebalancePayablemoney = 0;
					this.balance = this.payableMoney;
				}else if(this.isUsebalance && Number(this.orderInfo.balance)<this.payableMoney){
					this.usebalancePayablemoney = this.payableMoney - Number(this.orderInfo.balance);
					this.balance = this.orderInfo.balance;
				}else{
					this.usebalancePayablemoney = this.payableMoney;
					this.balance = 0;
				}
			}
		},
		methods: {
			init(){
				this.$api.addresslist().then(res=>{
					this.defaultAddressInfo = res.filter(item => item.is_master == 1);
				})
			},
			//获取商品提货信息
			getBackpackpicka(){
				this.$api.backpackpicka({
					goods_ids:this.goods_id,
					goods_num:this.num
				}).then(res=>{
					this.orderInfo = res;
					if(res.goods.length>10){
						this.showMore = true;
						this.goodsList = res.goods.slice(0,10);
					}else{
						this.goodsList = res.goods;
					}
					if(parseInt(this.num) < parseInt(this.orderInfo.postage_num)){
						this.totalfreight = this.orderInfo.goods.reduce((num,item)=>{
							return num + Number(item.freight_price)
						},0)
					}else{
						this.totalfreight = 0;
					}
					this.goods_ids = [];
					this.orderInfo.goods.map(item=>{
						this.goods_ids.push(item.id);
					})
					
					this.payableMoney = this.totalfreight;
					this.usebalancePayablemoney = this.payableMoney;
				})
			},
			//碎片合成
			getSgoodscreatea(){
				this.$api.sgoodscreatea({goods_id:this.goods_id,}).then(res=>{
					this.orderInfo = res;
					this.totalfreight = this.orderInfo.goods.reduce((num,item)=>{
						return num + Number(item.freight_price)
					},0)
					this.payableMoney = this.totalfreight;
					this.usebalancePayablemoney = this.payableMoney;
				})
			},
			//查看更多
			seemore(){
				this.goodsList = this.orderInfo.goods;
				this.showMore = false;
			},
			//添加收货人
			addConsignee() {
				uni.navigateTo({
					url: '/pages/mine/addressManagement/addressManagement'
				})
			},
			showToast(msg) {
				uni.showToast({
					title:msg,
					icon:'none'
				})
			},
			//去回收
			toRecovery(){
				uni.navigateTo({
					url:'/pages/package/package'
				})
			},
			//支付前
			payBefore(){
				let pay_type = '';
				if(this.payActive === 0){
					pay_type = 1
				}else{
					pay_type = 2
				}
				console.log('支付类型:',pay_type);
				if(JSON.stringify(this.defaultAddressInfo)=='[]' && JSON.stringify(this.addressInfo)=='{}'){
					this.showToast('请添加收货人');
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				let users_address_id = '';
				if(JSON.stringify(this.addressInfo)=='{}'){
					users_address_id = this.defaultAddressInfo[0].id;
				} else {
					users_address_id = this.addressInfo.id;
				}
				console.log('支付金额',this.usebalancePayablemoney);
				let balance = '';
				if(this.isUsebalance){
					balance = this.balance;
				}else{
					balance = 0;
				}
				//生成订单
				if(this.pageType == 'synthesis'){
					if(this.usebalancePayablemoney == 0){
						//碎片合成（金额为0）
						this.$api.sgoodscreatec({
							pay_type,
							goods_id:this.goods_id,
							goods_ids:this.goods_ids,
							goods_num:this.num,
							balance,
							price:this.usebalancePayablemoney,
							users_address_id
						}).then(res=>{
							console.log("碎片合成金额为0: ",res);
							uni.hideLoading();
							uni.showToast({
								title:'下单成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.setStorage({
									key:'order_type',
									data:'4',
									success: (res) => {
										uni.redirectTo({
											url: '/pages/mine/orderManagement/orderManagement'
										})
									}
								})
							},1500)
						})
					}else{
						//碎片合成（金额大于0）
						this.$api.sgoodscreateb({
							pay_type,
							goods_id:this.goods_id,
							goods_ids:this.goods_ids,
							goods_num:this.num,
							balance,
							price:this.usebalancePayablemoney,
							users_address_id
						}).then(res=>{
							console.log('支付信息',res);
							//支付
							this.goPay(pay_type,res);
						})
					}
				}else{
					if(this.usebalancePayablemoney == 0){
						//商品提货（金额为0）
						this.$api.backpackpickc({
							pay_type,
							s_goods_ids:this.goods_id.toString(),
							goods_ids:this.goods_ids.toString(),
							goods_num:this.num,
							balance,
							price:this.usebalancePayablemoney,
							users_address_id
						}).then(res=>{
							console.log("商品提货金额为0: ",res);
							uni.hideLoading();
							uni.showToast({
								title:'下单成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.setStorage({
									key:'order_type',
									data:'1',
									success: (res) => {
										uni.redirectTo({
											url: '/pages/mine/orderManagement/orderManagement'
										})
									}
								})
							},1500)
						})
					}else{
						//商品提货（金额大于0）
						this.$api.backpackpickb({
							pay_type,
							s_goods_ids:this.goods_id.toString(),
							goods_ids:this.goods_ids.toString(),
							goods_num:this.num,
							balance,
							price:this.usebalancePayablemoney,
							users_address_id
						}).then(res=>{
							console.log('支付信息',res);
							//支付
							this.goPay(pay_type,res);
						})
					}
				}
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										if(this.pageType == 'synthesis'){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'4',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'1',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}else{
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay", 
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										if(this.pageType == 'synthesis'){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'4',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'1',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 100rpx);
	padding-bottom: 130rpx;
}
.title{
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin: 40rpx 0 25rpx 30rpx;
}
.addedit{
	@include between;
}
.edit{
	@include align-center;
	margin-right: 30rpx;
	
	text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6407;
	}
	image{
		width: 12rpx;
		height: 24rpx;
		margin-left: 16rpx;
	}
}
.goods{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 auto;
}
.paygoods{
	display: flex;
	margin-bottom: 30rpx;
	
	&_pic{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.paygoodsinfo{
		width: 500rpx;
		height: 160rpx;
		margin-left: 30rpx;
		@include column-between;
		
		&_title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			@include one;
		}
		&_price{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			
			text{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF0000;
				margin-left: 20rpx;
			}
		}
		&_freight{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		.end{
			text-align: right;
		}
	}
}
.seemore{
	@include center;
	margin-top: 20rpx;
	
	text{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	image{
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}
}
.payinfo{
	@include between;
	margin-top: 30rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	
	&_text{
		@include between;
		width: 420rpx;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
		&_icon{
			@include align-center;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	&_integral{
		@include between-end;
		
		.integrals{
			@include align-center;
		}
		.integral{
			@include align-center;
			
			image{
				width: 34rpx;
				height: 34rpx;
				margin-right: 18rpx;
			}
		}
		.add{
			margin: 0 20rpx;
		}
	}
}
.line{
	width: 630rpx;
	height: 1rpx;
	background: #E5E5E5;
	margin: 30rpx auto;
}
.consignee {
	width: 690rpx;
	background-color: $white;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 30rpx;

	&_add {
		width: 220rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #FF6408;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6408;
		@include center;
		margin: 36rpx auto;
	}

	&_info {
		@include align-center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		&_name {
			@include one;
		}

		&_phone {
			margin-left: 80rpx;
		}

		image {
			width: 14rpx;
			height: 25rpx;
			margin-left: 10rpx;
		}
	}

	&_address {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
	}
}
.paytype{
	width: 690rpx;
	background-color: $white;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 30rpx;
	
	&_item{
		@include align-center;
		
		&:last-child{
			margin-top: 30rpx;
		}	
		&_check{
			width: 36rpx;
			height: 36rpx;
		}
		&_icon{
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}
}
.paybtn{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	padding: 0 30rpx;
	@include between;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_btn1{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF1501 0%, #FF9226 100%);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
	}
	&_btn2{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF9628 0%, #FFB752 100%);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
	}
}
.paybtn2{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	padding: 0 30rpx;
	@include center;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_btn2{
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(#FFBA00, #FE2E1C);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
	}
}
</style>
